<template>
  <div>
    <div class="ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>实时概况</span>
          <span class="fnormal fon_14 color_9 mar_l10">更新时间：{{ dateFormat(date) }}</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">营业总额（元）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{instoreData.inStoreMoney || 0}}</p>
            </div>
          </div>
          <div class="flex">
            <p class="fon_14 color_9 lh25">堂食订单：{{ instoreData.instorePay || 0 }}</p>
            <p class="fon_14 color_9 lh25 mar_l20">快餐订单：{{ instoreData.fastPay || 0 }}</p>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">预计收入（元）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ instoreData.instoreActualMoney || 0 }}</p>
            </div>
          </div>
          <div class="flex">
            <p class="fon_14 color_9 lh25">堂食订单：{{ instoreData.instoreMoney || 0 }}</p>
            <p class="fon_14 color_9 lh25 mar_l20">快餐订单：{{ instoreData.fastMoney || 0 }}</p>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">有效订单数（单）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{instoreData.inStoreNumCount || 0}}</p>
            </div>
          </div>
          <div class="flex">
            <p class="fon_14 color_9 lh25">堂食订单：{{ instoreData.inStoreNum || 0 }}</p>
            <p class="fon_14 color_9 lh25 mar_l20">快餐订单：{{ instoreData.fastNum || 0 }}</p>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">无效订单数（单）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ instoreData.instoreRefundNumCount || 0 }}</p>
            </div>
          </div>
          <div class="flex">
            <p class="fon_14 color_9 lh25">堂食订单：{{ instoreData.instoreRefundNum || 0 }}</p>
            <p class="fon_14 color_9 lh25 mar_l20">快餐订单：{{ instoreData.fastRefundNum || 0 }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20">
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1 ba_f pad_20 bor_rad5" style="height: 420px">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>堂食总览</span>
            </div>
          </div>
          <div class="flex-bet">
            <div class="flex-g-1">
              <div id="mainEch32" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
            </div>
            <div class="flex-g-1">
              <div id="mainEch33" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
            </div>
          </div>
        </div>
<!--        <div class="flex-g-1 ba_f mar_lr20 pad_20 bor_rad5">-->
<!--          <div class="shuju_title">-->
<!--            <div class="shuju_title_text">-->
<!--              <span>订单渠道</span>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div id="mainEch33" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>-->
<!--        </div>-->
        <div class="flex-g-1 ba_f pad_20 bor_rad5 mar_l20" style="height: 420px">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>快餐总览</span>
            </div>
          </div>
          <div class="flex-bet">
            <div class="flex-g-1">
              <div id="mainEch35" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
            </div>
            <div class="flex-g-1">
              <div id="mainEch34" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="t_r mar_t20 ba_f outmain">-->
<!--      <div class="shuju_title">-->
<!--        <div class="shuju_title_text">-->
<!--          <span>数据统计</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="main-icon flex t_l mar_t20">-->
<!--        <div class="flex-1 t_l pad_20 bortColor bortColor3">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">当面付订单（元）</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{inStoreCashierData.money || 0}}</p>-->
<!--              <p class="fon_12 title6 lh25">有效订单（单）：{{inStoreCashierData.count || 0}}</p>-->
<!--              <p class="fon_12 title6 lh25">付款人数（人）：{{inStoreCashierData.userNum || 0}}</p>-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">-->
<!--                  <p class="lh22">微信支付：{{inStoreCashierData.cashierWxPay}}</p>-->
<!--                  <p class="lh22">余额支付：{{inStoreCashierData.cashierBalancePay}}</p>-->
<!--                </div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 bortColor bortColor4 mar_l20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">快餐订单（元）</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{inStoreFastData.money || 0}}</p>-->
<!--              <p class="fon_12 title6 lh25">有效订单（单）：{{inStoreFastData.count || 0}}</p>-->
<!--              <p class="fon_12 title6 lh25">付款人数（人）：{{inStoreFastData.userNum || 0}}</p>-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">-->
<!--                  <p class="lh22">微信支付：{{inStoreFastData.fastWxPay}}</p>-->
<!--                  <p class="lh22">余额支付：{{inStoreFastData.fastBalancePay}}</p>-->
<!--                </div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 bortColor bortColor5 mar_l20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">堂食订单（元）</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{inStoreData.instorePay || 0}}</p>-->
<!--              <div class="flex">-->
<!--                <p class="fon_12 title6 lh25">线上订单（单）：{{inStoreData.instoreCount || 0}}</p>-->
<!--                <p class="fon_12 title6 lh25 mar_l30">线下订单数（单）：{{inStoreData.instoreBalanceOfflineCount || 0}}</p>-->
<!--              </div>-->
<!--              <div class="flex">-->
<!--                <p class="fon_12 title6 lh25">实收金额：{{inStoreData.instoreActualPay || 0}}</p>-->
<!--                <p class="fon_12 title6 lh25 mar_l30">营业额：{{inStoreData.instorePay || 0}}</p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">-->
<!--                  <p class="lh22">微信支付：{{inStoreData.instoreWxPay}}</p>-->
<!--                  <p class="lh22">余额支付：{{inStoreData.instoreBalancePay}}</p>-->
<!--                  <p class="lh22">线下支付：{{inStoreData.instoreBalanceOfflinePay}}</p>-->
<!--                </div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="mar_t20 pad_20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>商品看板</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1" style="height: 520px;">
          <div class="flex t_l">
            <div class="title35">堂食TOP10商品</div>
<!--            <div class="toolTip mar_l10">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">统计周期内，店内TOP10商品</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
          </div>
          <div class="mar_t10 shuju_table">
            <el-table
                    :data="goodsData"
                    stripe
                    style="width: 100%">
              <el-table-column
                      prop="id"
                      label="排名"
              >
              </el-table-column>
              >
              <el-table-column
                      prop="name"
                      label="商品名称"
              >
              </el-table-column>
              >
              <el-table-column
                      prop="num"
                      label="商品销量数">
              </el-table-column>
              <el-table-column
                      prop="money"
                      label="销售额">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="flex-g-1 mar_l30" style="height: 520px;">
          <div class="flex t_l">
            <div class="title35">快餐TOP10商品</div>
<!--            <div class="toolTip mar_l10">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">统计周期内，快餐TOP10商品</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
          </div>
          <div class="mar_t10 shuju_table">
            <el-table
                    :data="orderData"
                    stripe
                    style="width: 100%"
            >
              <el-table-column
                      prop="id"
                      label="排名"
              >
              </el-table-column>
              >
              <el-table-column
                      prop="name"
                      label="商品名称"
              >
              </el-table-column>
              >
              <el-table-column
                      prop="money"
                      label="销售额">
              </el-table-column>
              <el-table-column
                      prop="num"
                      label="商品销量">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {getStatistics} from "@/api/instore";
  import echarts from "echarts";
  export default {
    mounted() {
      this.bus.$emit('loading', true);
      this.init();
      // this.mainEch32()
      // this.mainEch33()
      // this.mainEch34()
      // this.mainEch35()
    },
    data () {
      return {
        instoreData:{},
        inStoreCashierData:{},
        inStoreFastData:{},
        inStoreData:{},
        goodsData: [],
        orderData: [],
        echarts32_option: {
          color: ['#5654F5', '#4CA8FF', '#4EC478', '#fba33f', '#EBA675'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 0,
            data: ['微信小程序', '支付宝小程序', '收银台']
          },
          series: [
            {
              name: '有效订单',
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 35.00, name: '微信小程序'},
                {value: 20.00, name: '支付宝小程序'},
                {value: 20.00, name: '收银台'},
              ],
            }
          ]
        },
        echarts33_option: {
          color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
          tooltip: {
            trigger: 'item',
            // formatter:function(data){ return data.percent.toFixed(2);}
          },
          legend: {
            orient: 'vertical',
            right: 0,
            data: ['微信支付', '支付宝支付', '余额支付', '现金支付', '自有支付方式']
          },
          series: [
            {
              name: '支付金额',
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 35.00, name: '微信支付'},
                {value: 20.00, name: '支付宝支付'},
                {value: 20.00, name: '余额支付'},
                {value: 20.00, name: '现金支付'},
                {value: 20.00, name: '自有支付方式'},
              ],
            }
          ]
        },
        echarts34_option: {
          color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
          tooltip: {
            trigger: 'item',
            // formatter:function(data){ return data.percent.toFixed(2);}
          },
          legend: {
            orient: 'vertical',
            right: 0,
            data: ['微信支付', '支付宝支付', '余额支付', '现金支付', '自有支付方式']
          },
          series: [
            {
              name: '支付金额',
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 35.00, name: '微信支付'},
                {value: 20.00, name: '支付宝支付'},
                {value: 20.00, name: '余额支付'},
                {value: 20.00, name: '现金支付'},
                {value: 20.00, name: '自有支付方式'},
              ],
            }
          ]
        },
        echarts35_option: {
          color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 0,
            data: ['微信小程序', '支付宝小程序', '收银台']
          },
          series: [
            {
              name: '有效订单',
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 35.00, name: '微信小程序'},
                {value: 20.00, name: '支付宝小程序'},
                {value: 20.00, name: '收银台'},
              ],
            }
          ]
        },
        date: new Date(),
      }
    },
    methods: {
        async init(){
          const {data} = await getStatistics();
          if (data) {
            this.instoreData=data;
            this.inStoreCashierData = data.inStoreCashierData
            this.inStoreFastData = data.inStoreFastData
            this.inStoreData = data.inStoreData
            this.echarts32_option.series[0].data[0].value = +data.wxPaySum;
            this.echarts32_option.series[0].data[1].value = +data.aliPaySum;
            this.echarts32_option.series[0].data[2].value = +data.cashierPaySum;
            this.mainEch32()
            this.echarts33_option.series[0].data[0].value = +data.wxPay;
            this.echarts33_option.series[0].data[1].value = +data.aliPay;
            this.echarts33_option.series[0].data[2].value = +data.balancePay;
            this.echarts33_option.series[0].data[3].value = +data.moneyPay;
            this.echarts33_option.series[0].data[4].value = +data.myselfPay;
            this.mainEch33()
            this.echarts35_option.series[0].data[0].value = +data.fWxPaySum;
            this.echarts35_option.series[0].data[1].value = +data.fAliPaySum;
            this.echarts35_option.series[0].data[2].value = +data.fCashierPaySum;
            this.mainEch35()
            this.echarts34_option.series[0].data[0].value = +data.fWxPay;
            this.echarts34_option.series[0].data[1].value = +data.fAliPay;
            this.echarts34_option.series[0].data[2].value = +data.fBalancePay;
            this.echarts34_option.series[0].data[3].value = +data.fMoneyPay;
            this.echarts34_option.series[0].data[4].value = +data.fMyselfPay;
            this.mainEch34()
            this.goodsData = data.inStoreGoodsData?data.inStoreGoodsData:[]
            this.orderData = data.fastGoodsData?data.fastGoodsData:[]
            this.bus.$emit('loading', false)
          }
        },
      mainEch32() {
        let myChart = echarts.init(document.getElementById('mainEch32'))
        myChart.setOption(this.echarts32_option, true)
      },
      mainEch33() {
        let myChart = echarts.init(document.getElementById('mainEch33'))
        myChart.setOption(this.echarts33_option, true)
      },
      mainEch34() {
        let myChart = echarts.init(document.getElementById('mainEch34'))
        myChart.setOption(this.echarts34_option, true)
      },
      mainEch35() {
        let myChart = echarts.init(document.getElementById('mainEch35'))
        myChart.setOption(this.echarts35_option, true)
      },
      dateFormat(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      },
    }
  }
</script>
